<template>
  <ul class="item-container clearfix">
    <li v-for="(temp, index) in 9" :key="'miva'+index" class="item-box">
      <div class="item-body">
        <img class="grad-img" src="@/assets/img/ceshi.png" alt srcset>
        <div class="title">
          <span>标题容器</span>
          <span>标题分类</span>
        </div>
      </div>
      <div class="jiantou-box">
        <img src="@/assets/img/binnerBtn1.png" alt srcset>
      </div>
    </li>
  </ul>
</template>


<style lang="less" scoped>
.item-container {
  padding: 20px;
}
.item-box {
  float: left;
  width: 100%/3;
  height: 0;
  padding-bottom: 100%/3;
  position: relative;
  .item-body {
    width: 90%;
    height: 0;
    padding-bottom: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    .grad-img {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .title {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 10px;
      background-color: #f7f7f7;
      color: #666;
    }
  }
  .jiantou-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    // transform: translateX(-1000%);
    transition: all .5s;
    // background: #fff;
    // border-radius: 50%;
  }

  &:hover {
    .grad-img {
      opacity: 0.5;
      background: #000
    }
    .jiantou-box {
      display: block;
      // transform: translateX(0%)
    }
  }

  @media (max-width: 768px) {
    & {
      width: 100%;
      padding-bottom: 100%;
    }
  }
}
</style>
